<template>
  <div>
    <div class="">
      <van-form @submit="onSubmit">
        <van-field label="用户" v-model="regForm.name" type="text" placeholder="请输入用户"
                   :rules="[{ pattern:regNamePwd,required: true, message: '无效用户名' }]"/>

        <van-field label="密码" v-model="regForm.password" type="password" placeholder="请输入密码"
                   :rules="[{ pattern:regNamePwd,required: true, message: '无效密码' }]"/>

        <van-field label="确认" v-model="regForm.password2" type="password" placeholder="请确认密码"
                   :rules="[{ pattern:regNamePwd,required: true, message: '无效密码' }]"/>

        <van-field label="邮箱" v-model="regForm.email" type="email" placeholder="请输入邮箱"
                   :rules="[{ pattern:regEmail, message: '无效邮箱' }]"/>

        <van-field label="电话" v-model="regForm.phone" type="tel" placeholder="请输入电话"
                   :rules="[{ pattern:regPhone, message: '无效手机号码' }]"/>

        <van-field name="radio" label="性别">
          <template #input>
            <van-radio-group v-model="regForm.gender" direction="horizontal">
              <van-radio :name="1">男</van-radio>
              <van-radio :name="0">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field label="昵称" v-model="regForm.nickName" type="text" placeholder="请输入昵称"
        />

        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>

      </van-form>
      <div class="content-padded">
        <p>注册成功后的用户可用于登录</p>
      </div>
    </div>
  </div>
</template>

<script>
import * as UserAPI from "@/api/user.js";
import {setStorageUser} from '@/utils/storage.js'

export default {
  name: "register",
  data() {
    return {
      regForm: { //表单中的字段名与数据库中用户表的字段名要求一致
        name: "",
        password: "",
        password2: "",
        email: "",
        phone: "",
        gender: 1,
        avatar: "/images/user_default.png",
        nickName: ""
      },
      //规则:字母数字‘6~12
      regNamePwd: /^[a-z0-9]{3,12}$/i,
      regPhone: /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/,
      regEmail: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
    };
  },

  methods: {
    //处理提交保存
    onSubmit() {
      if (this.regForm.password != this.regForm.password2) {
        this.$toast("密码两次输入不一致");
        return;
      }

      //注意传递过去的参数user的属性名
      let user = this.regForm;
      delete user.password2; //删除该临时的字段
      UserAPI.register(user).then(result => {
        let {id, name, avatar} = result.data;
        let user = {id, name, avatar};
        setStorageUser(user);
        this.$router.push({
          name: "login"
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.content-padded {
  margin: 30px;
}
</style>
